<template>
  <div class="bgys">
    <!-- 公共头部 -->
    <head-main />
    <!-- 盒子 -->
    <div class="wpdesbox">
      <!-- 标题菜单 -->
      <div class="taskitembox">
        <div
          class="tool taskitem"
          v-for="item in taskdata"
          :key="item.id"
          @click="step = item.id"
        >
          <img
            src="@/images/tbtaska.png"
            alt=""
            class="normal"
            v-if="step != item.id"
          />
          <img
            src="@/images/tbtaskac.png"
            alt=""
            class="active"
            v-if="step != item.id"
          />
          <img
            src="@/images/tbtaskac.png"
            alt=""
            class=""
            v-if="step == item.id"
          />
          <span class="taskitemspan">{{ item.name }}</span>
        </div>
      </div>
      <!-- 物品展示+物品描述盒子 -->
      <div class="wpdbox" v-if="step == 1" :key="step">
        <div class="wpmxbox" v-if="step == 1">
          <show-mxs :mxmtnumber="mxmtnumber" />
        </div>
        <div class="wpmxdex">
          <img src="@/images/wpmxdeximg.png" alt="" class="wpmxdeximg" />
          <div class="wpwz">
            <!-- 工作原理 -->
            <img src="@/images/gzyl.png" alt="" class="gzyl" />
            <!-- 工作原理内容 -->
            <div class="wpitemdes">
              全自动血液分析仪是一种集计算机技术、精密光学技术和电子技术于一体的医疗设备。它能够自动化地对血液样本进行多种参数的分析和测量，如红细胞计数、白细胞计数、血小板计数、血红蛋白浓度等。这些参数对于评估患者的健康状况、诊断疾病以及监测治疗效果具有重要意义。
            </div>
            <!-- 用途 -->
            <img src="@/images/yongt.png" alt="" class="itemyt" />
            <!-- 用途 -->
            <div class="wpitemdes">
              疾病诊断：通过测量血液中的各种参数，帮助医生诊断贫血、感染、炎症、出血倾向等多种疾病。
              健康评估：提供关于患者整体健康状态的信息，如红细胞压积、平均红细胞体积等，有助于评估患者的营养状况、骨髓造血功能等。
              治疗效果监测：在治疗过程中，定期检测血液参数可以监测治疗效果，及时调整治疗方案。
            </div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="wpdbox" v-if="step == 2" :key="step">
        <div class="wpmxbox" v-if="step == 2">
          <show-mxs :mxmtnumber="mxmtnumber" />
        </div>

        <div class="wpmxdex">
          <div class="beautifulScroll wpmxdexs">
            <!-- <img src="@/images/wpmxdeximg.png" alt="" class="wpmxdeximg" /> -->
            <div class="wpwz">
              <div class="wpitemdes">
                真空采血管脱盖机专门用于打开真空采血管顶盖的设备。它采用先进的机械和自动化技术，能够快速、准确地完成采血管顶盖的打开操作。这种机器通常由以下几个部分组成：
              </div>

              <img
                src="@/images/jxbf.png"
                alt=""
                class="gzyl"
                style="visibility: hidden"
              />
              <!-- 工作原理 -->
              <img src="@/images/jxbf.png" alt="" class="gzyl" />
              <!-- 工作原理内容 -->
              <!-- <div class="wpitemdes">
                包括传动系统、夹具和真空头盖。传动系统负责将机器与电源连接，驱动机器运转；夹具负责将真空采血管固定在适当的位置；真空头盖则与机器相连，通过真空吸力将真空采血管的顶盖打开。
              </div> -->
              <!-- 用途 -->
              <img src="@/images/kzxt.png" alt="" class="itemyt" />
              <!-- 用途 -->
              <div class="wpitemdes">
                溶血剂是一种能够破坏红细胞膜，释放出血红蛋白和其他细胞内成分的化学试剂。在血液学检测中，溶血剂通常用于红细胞参数（如血红蛋白浓度）的检测过程中。
              </div>
              <!-- 用途 -->
              <img src="@/images/zkb.png" alt="" class="itemyt" />
              <!-- 用途 -->
              <div class="wpitemdes">
                红细胞参数检测：通过溶血作用，使红细胞内的血红蛋白释放出来，便于后续的化学或光学检测。
                辅助诊断：溶血剂的使用提高了红细胞参数检测的准确性和可靠性，有助于医生更准确地诊断相关疾病。
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="wpdbox" v-if="step == 3" :key="step">
        <div class="wpmxbox" v-if="step == 3">
          <show-mxs :mxmtnumber="mxmtnumber" />
        </div>
        <div class="wpmxdex">
          <img src="@/images/wpmxdeximg.png" alt="" class="wpmxdeximg" />
          <div class="wpwz">
            <!-- 工作原理 -->
            <img src="@/images/gzyl.png" alt="" class="gzyl" />
            <!-- 工作原理内容 -->
            <div class="wpitemdes">
              清洗药瓶（或清洗液瓶）是全自动血液分析仪中的一个重要组成部分，用于提供清洗液以清洁仪器管路、反应杯等部件。清洗液通常为特定配方的化学溶液，具有去污能力强、无残留、对仪器无腐蚀等特点。
            </div>
            <!-- 用途 -->
            <img src="@/images/yongt.png" alt="" class="itemyt" />
            <!-- 用途 -->
            <div class="wpitemdes">
              防止交叉污染：定期更换清洗液并清洗仪器部件，可以有效防止不同样本之间的交叉污染，保证检测结果的准确性。
              仪器维护：清洗液的使用有助于保持仪器的清洁和正常运行，延长仪器的使用寿命。
            </div>
          </div>
        </div>
      </div>
      <div class="wpdbox" v-if="step == 4" :key="step">
        <div class="wpmxbox" v-if="step == 4">
          <show-mxs :mxmtnumber="mxmtnumber" />
        </div>
        <div class="wpmxdex">
          <img src="@/images/wpmxdeximg.png" alt="" class="wpmxdeximg" />
          <div class="wpwz">
            <!-- 工作原理 -->
            <img src="@/images/gzyl.png" alt="" class="gzyl" />
            <!-- 工作原理内容 -->
            <div class="wpitemdes">
              打印机是一种将计算机或其他电子设备中的文本、图像等信息打印到纸张或其他介质上的输出设备。在医疗环境中，打印机通常用于打印患者的检查报告、病历资料等。
            </div>
            <!-- 用途 -->
            <img src="@/images/yongt.png" alt="" class="itemyt" />
            <!-- 用途 -->
            <div class="wpitemdes">
              信息输出：将全自动血液分析仪等医疗设备生成的检测结果以纸质报告的形式输出，方便医生、患者及其家属查看。
              记录保存：打印出的报告可以作为患者的医疗记录保存下来，供日后参考或作为法律依据。
              信息传递：在医疗团队内部或医患之间传递信息，确保检测结果的及时、准确传达。
            </div>
          </div>
        </div>
      </div>
      <!-- 开始实验 -->
      <div class="tool startbox" @click="startfn">
        <img src="@/images/start.png" alt="" class="normal" />
        <img src="@/images/startac.png" alt="" class="active" />
      </div>
    </div>
  </div>
</template>

<script>
import HeadMain from '@/components/headMain.vue'
import ShowMxs from '@/components/showMxs.vue'
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { HeadMain, ShowMxs },
  data() {
    //这里存放数据
    return {
      step: 1,
      mxmtnumber: 'MMFXY_GLB.glb',
      taskdata: [
        {
          id: 1,
          name: '全自动血液分析仪'
        },
        {
          id: 2,
          name: '溶血剂'
        },
        {
          id: 3,
          name: '清洗药'
        },
        {
          id: 4,
          name: '打印机'
        }
      ]
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    step: {
      handler(i) {
        if (i == 1) {
          this.mxmtnumber = 'MMFXY_GLB.glb'
        }
        if (i == 2) {
          this.mxmtnumber = 'RongXueJi.glb'
        }
        if (i == 3) {
          this.mxmtnumber = 'QingXiYaoPing.glb'
        }
        if (i == 4) {
          this.mxmtnumber = 'DaYinJi.glb'
        }
      },
      immediate: true,
      deep: true
    }
  },
  //方法集合
  methods: {
    startfn() {
      this.$router.push({
        name: 'index'
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.bgys {
  background-color: #02284b;
  width: 100%;
  height: 100%;
}
</style>
